<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Netflix Clone V2</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'Roboto', sans-serif;
      background-image: url('img_main.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      color: white;
    }
  </style>
</head>
<body>

    <header class="navbar">
  <div class="logo">
    <a href="https://joegeorge022.github.io/Netflix-Clone-2/">
      <img src="netlfix_logo.png" alt="Netflix Logo">
    </a>
  </div>

  <!-- CSS-Only Hamburger (Checkbox Hack) -->
  <input type="checkbox" id="menu-toggle">
  <label for="menu-toggle" class="hamburger">
    <span></span>
    <span></span>
    <span></span>
  </label>

  <nav class="menu">
    <a href="#content1">Home</a>
    <a href="#content1">TV Shows</a>
    <a href="#content1">Movies</a>
    <a href="#content1">Latest</a>
    <a href="#content1">My List</a>
  </nav>
</header>



  <section class="hero">
    <div class="hero-content">
      <h1>Watch the Best Movies & TV Shows</h1>
      <p>Webpage might not look good on a mobile.</p>
      <a href="#content1"><button class="cta-btn">Scroll Down</button></a>
    </div>
  </section>

  <section id="content1" class="content-section">
    <h2>Popular on Netflix </h2>
    <div class="content-grid">
      <a href="https://www.youtube.com/watch?v=uLtkt8BonwM" target="_blank"><img src="images/movie1.jpg" alt="Movie 1"></a>
      <a href="https://www.youtube.com/watch?v=KvMY1uzSC1E" target="_blank"><img src="images/movie2.jpg" alt="Movie 2"></a>
      <a href="https://www.youtube.com/watch?v=KvMY1uzSC1E" target="_blank"><img src="images/movie3.jpg" alt="Movie 3"></a>
      <a href="https://www.youtube.com/watch?v=TcMBFSGVi1c" target="_blank"><img src="images/movie4.jpg" alt="Movie 4"></a>
      <a href="https://www.youtube.com/watch?v=s8gLcN47EMo" target="_blank"><img src="images/movie5.jpg" alt="Movie 5"></a>
    </div>
  </section>
  
  <section id="content2" class="content-section">
    <h2>Goated Movies in IMDb </h2>
    <div class="content-grid">
      <a href="https://www.youtube.com/watch?v=zSWdZVtXT7E" target="_blank"><img src="images/movie6.jpg" alt="Movie 6"></a>
      <a href="https://www.youtube.com/watch?v=PLl99DlL6b4" target="_blank"><img src="images/movie7.jpg" alt="Movie 7"></a>
      <a href="https://www.youtube.com/watch?v=KvMY1uzSC1E" target="_blank"><img src="images/movie3.jpg" alt="Movie 3"></a>
      <a href="https://www.youtube.com/watch?v=YoHD9XEInc0" target="_blank"><img src="images/movie8.jpg" alt="Movie 8"></a>
      <a href="https://www.youtube.com/watch?v=s8gLcN47EMo" target="_blank"><img src="images/movie5.jpg" alt="Movie 5"></a>
    </div>
  </section>

  <section id="content3" class="content-section">
    <h2>Most Loved Movies </h2>
    <div class="content-grid">
      <a href="https://www.youtube.com/watch?v=YoHD9XEInc0" target="_blank"><img src="images/movie8.jpg" alt="Movie 8"></a>
      <a href="https://www.youtube.com/watch?v=TcMBFSGVi1c" target="_blank"><img src="images/movie4.jpg" alt="Movie 4"></a>
      <a href="https://www.youtube.com/watch?v=s8gLcN47EMo" target="_blank"><img src="images/movie5.jpg" alt="Movie 5"></a>
      <a href="https://www.youtube.com/watch?v=PLl99DlL6b4" target="_blank"><img src="images/movie7.jpg" alt="Movie 7"></a>
      <a href="https://www.youtube.com/watch?v=zSWdZVtXT7E" target="_blank"><img src="images/movie6.jpg" alt="Movie 6"></a>
    </div>
  </section>
  
  <footer class="footer">
    <p>© 2024 Netflix Clone - All rights reserved</p>
  </footer>
  
  <audio autoplay loop>
        <source src="cyberpunk-sound.mp3" type="audio/mpeg">
        Your browser does not support the audio tag.
  </audio>

</body>
</html>